import React, { useEffect, memo } from 'react'
import Scroll from '../../baseUI/scroll'
import { connect } from 'react-redux'
import * as actionTypes from './store/actionCreators'
import RotationChart from '../../components/main/rotationChart/RotationChart.jsx'
import RowSwiper from "@/components/main/rowSwiper/RowSwiper"
import { Main } from './home.style'
import { useNavigate, Outlet } from "react-router-dom"
import ClumnSwiper from "@/components/main/clumnSwiper/ClumnSwiper"
const Home = (props) => {
    let navigate = useNavigate();
    // 状态
    const { homedata } = props
    // console.log(props);
    // console.log(homedata);
    const { rotationImg = [], swiperHenProducts_1 = {}, swiperHenProducts_2 = {}, swiperShuProducts_1 = {}, swiperShuProducts_2 = {}, swiperShuProducts_3 = {}, swiperShuProducts_4 = {}, swiperShuProducts_5 = {} } = homedata
    // const { rotationImg, swiperHenProducts_1, swiperHenProducts_2, swiperShuProducts_1, swiperShuProducts_2, swiperShuProducts_3, swiperShuProducts_4, swiperShuProducts_5 } = homedata
    // action 业务方法

    const goto = () => {
        navigate("/home/123", { replace: true });
    }
    const { getMainDataDispatch } = props
    // console.log(swiperHenProducts_1);                                                                                                                                                                                                             
    useEffect(() => {
        // console.log("进入了useffect")
        if (!homedata.length) {
            getMainDataDispatch()
        }
    }, [])
    return (
        <Main>
            <Scroll
                direction={'vertical'}
                refresh={false}

            >
                <div className="contaner">
                    <RotationChart rotationImg={rotationImg} />
                    <div className="title">{swiperHenProducts_1.describe}</div>
                    <RowSwiper id="swiperHenProducts_1" ></RowSwiper>
                    {/* 需要在RowSwiper上触发点击事件，将唯一值id传进去，从而识别详情页的数据 */}
                    <div className="title">{swiperHenProducts_2.describe}</div>

                    <RowSwiper id="swiperHenProducts_2"></RowSwiper>
                    < ClumnSwiper id="swiperShuProducts_1"></ClumnSwiper>
                    < ClumnSwiper id="swiperShuProducts_2"></ClumnSwiper>
                    < ClumnSwiper id="swiperShuProducts_3"></ClumnSwiper>
                    < ClumnSwiper id="swiperShuProducts_4"></ClumnSwiper>
                    < ClumnSwiper id="swiperShuProducts_5"></ClumnSwiper>
                </div>


            </Scroll>
            <Outlet />
        </Main>

    )
}



const mapStateToPorps = (state) => {
    return {
        homedata: state.home.homedata
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getHomeData())
        }
        // getMainDataDispatch: actionTypes.getHomeData
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(memo(Home))
